
<style>
    html, body, .bg-gray, .mui-content, #container {
        height: 100%;
        width: 100%;
    }

    .content-window-card {
        position: relative;
        box-shadow: none;
        bottom: 0;
        left: 0;
        width: auto;
        padding: 0;
    }

        .content-window-card p {
            height: 2rem;
        }

    .custom-info {
        border: solid 1px silver;
    }

    div.info-top {
        position: relative;
        background: none repeat scroll 0 0 #F9F9F9;
        border-bottom: 1px solid #CCC;
        border-radius: 5px 5px 0 0;
    }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

            div.info-top img:hover {
                box-shadow: 0px 0px 5px #000;
            }

    div.info-middle {
        font-size: 12px;
        line-height: 20px;
    }

    div.info-bottom {
        height: 0px;
        width: 100%;
        clear: both;
        text-align: center;
    }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

    span {
        margin-left: 5px;
        font-size: 11px;
    }

    .info-middle img {
        float: left;
        height: 150px;
        width: 100%;
    }
</style>
<div class="bg-gray ">
    <header class="mui-bar mui-bar-nav head-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href='@Url.Action("Index","Map")'></a>
        <h1 class="mui-title">项目列表</h1>
    </header>
    <!--DOM -->
    <div class="mui-content ">

        <div id="container"></div>


    </div>
    <div class="toinfo-detail-flexed-box">
        <a href='/Map/Map?id=@ViewContext.HttpContext.Request.Query["id"]' class="mui-btn mui-btn-block mui-btn-yellow">
            添加点
        </a>
    </div>

</div>
<div id="imgdiv" style="vertical-align: middle;display: flex;align-items: center;  top: 0;left: 0; z-index: 1000;height: 100%;width: 100%; position: absolute;background-color: #ddd;">
    <img id="img" style="height: auto;width: 100%;align-items: center;">
</div>


@section Scripts{
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=f5a03f5e59d4b71b6e7c7aef2fb89c30"></script>
    <script type="text/javascript">
	$("#imgdiv").hide();


	//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
	var map = new AMap.Map("container", {
		resizeEnable: true,
		//center: [116.39, 39.92],
		zoom: 14,
	});
	var layer1 = new AMap.TileLayer.Satellite();
	map.add(layer1);
	var infoWindow = new AMap.InfoWindow({
		isCustom: true,
		offset: new AMap.Pixel(16, -45)
	});
	var markers = [];

	//添加marker标记
	function addMarker() {
		map.clearMap();
		// 	    var marker = new AMap.Marker({
		// 	        map: map,
		// 	        position: [116.481181, 39.989792]
		// 	    });

        $.ajax({
        type:"get",
        url:"/Map/GetMaps",
        data:{id:@ViewContext.HttpContext.Request.Query["id"]},
        success:function(result){
			for(var i=0;i<result.length; i++){
			                //var lnglat = lnglats[i];
			            // 创建点实例
			            var marker = new AMap.Marker({
			                position: new AMap.LngLat(parseFloat(result[i].lng) , parseFloat(result[i].lat)),
			                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
			                extData: {
			                    id: i + 1
			                }
			            });
			            var title = '<a href="/Map/Detail?id='+result[i].id+'">'+result[i].title+'</a>',
			                content = [];
			            content.push("<span>地址："+result[i].address+"</span></ br>");
			
			            content.push("<span>描述："+result[i].miaoShu+"</span></ br>");
			
		var imgs=result[i].dataImg.split(",");
		for(var j=0;j<imgs.length; j++){
			content.push(
				"<a href='javascript:;' onclick='showimg("+'"'+imgs[j]+'"'+")'><img src='"+imgs[j]+"'></a>"
			);
		}
			
			            marker.content = createInfoWindow(title, content.join("<br/>"));
			            marker.on('click', markerClick);
			            marker.emit('click', {
			                target: marker
			            });
			
			
			
			            markers.push(marker);
			            //鼠标点击marker弹出自定义的信息窗体
			            //      AMap.event.addListener(marker, 'click', function () {
			            //          infoWindow.open(map, marker.getPosition());
			            //      });
			
			            }
			
				// 创建覆盖物群组，并将 marker 传给 OverlayGroup
				var overlayGroups = new AMap.OverlayGroup(markers);
			
				map.add(overlayGroups);
        }



        })
             
	}
	addMarker();

	//实例化信息窗体

	// 	var infoWindow = new AMap.InfoWindow({
	// 	    isCustom: true,  //使用自定义窗体
	// 	    content: createInfoWindow(title, content.join("<br/>")),
	// 	    offset: new AMap.Pixel(16, -45)
	// 	});

	//构建自定义信息窗体
	function createInfoWindow(title, content) {
		var info = document.createElement("div");
		info.className = "custom-info input-card content-window-card";

		//可以通过下面的方式修改自定义窗体的宽高
		//info.style.width = "400px";
		// 定义顶部标题
		var top = document.createElement("div");
		var titleD = document.createElement("div");
		var closeX = document.createElement("img");
		top.className = "info-top";
		titleD.innerHTML = title;
		closeX.src = "https://webapi.amap.com/images/close2.gif";
		closeX.onclick = closeInfoWindow;

		top.appendChild(titleD);
		top.appendChild(closeX);
		info.appendChild(top);

		// 定义中部内容
		var middle = document.createElement("div");
		middle.className = "info-middle";
		middle.style.backgroundColor = 'white';
		middle.innerHTML = content;
		info.appendChild(middle);

		// 定义底部内容
		var bottom = document.createElement("div");
		bottom.className = "info-bottom";
		bottom.style.position = 'relative';
		bottom.style.top = '0px';
		bottom.style.margin = '0 auto';
		var sharp = document.createElement("img");
		sharp.src = "https://webapi.amap.com/images/sharp.png";
		bottom.appendChild(sharp);
		info.appendChild(bottom);
		return info;
	}



	function markerClick(e) {
		if (e.lnglat != undefined) {
			console.log(e.lnglat.lng)
			map.setCenter([e.lnglat.lng, e.lnglat.lat]);
			map.setZoom(16);

		}
		infoWindow.setContent(e.target.content);
		infoWindow.open(map, e.target.getPosition());
	}
	map.setFitView();

	infoWindow.close();
	closeInfoWindow();
	//关闭信息窗体
	function closeInfoWindow() {
		map.clearInfoWindow();
	}
	function showimg(imgurl) {
		$("#imgdiv").show();
		$("#img").attr("src",imgurl);
	}
	$("#imgdiv").click(function(){
		$("#imgdiv").hide();
	})

    </script>
}
